import 'package:app/shared/constants/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:like_button/like_button.dart';

class MomentCom extends StatefulWidget {
  final ListData;
  MomentCom({Key? key, required this.ListData}) : super(key: key);

  @override
  _MomentComState createState() => _MomentComState();
}

class _MomentComState extends State<MomentCom>
    with SingleTickerProviderStateMixin {
  int _currentIndex = -1;

  @override
  void initState() {
    // TODO: implement initState

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      //解决无限高度问题
      physics: NeverScrollableScrollPhysics(),
      children: List.generate(
        widget.ListData.length,
        (index) => Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                ClipOval(
                  child: Image.network(
                    widget.ListData[index].toJson()["user"]["image"],
                    fit: BoxFit.cover,
                    width: 46,
                    height: 46,
                  ),
                ),
                Container(
                  margin: EdgeInsets.symmetric(
                      horizontal: sDefaultMarginPadding * 2),
                  child: Text.rich(
                    TextSpan(children: [
                      TextSpan(
                        text:
                            "${widget.ListData[index].toJson()["user"]["nickname"]}\n",
                        style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.bold,
                            fontSize: 16),
                      ),
                      TextSpan(
                        text: widget.ListData[index].toJson()["time"],
                        style: TextStyle(
                          color: sTextColorDes,
                          fontSize: 12,
                          height: 1.5,
                          decorationColor: Colors.black,
                        ),
                        //recognizer: rec //点击事件处理器
                      )
                    ]),
                  ),
                ),
                Expanded(
                    child: Align(
                        alignment: Alignment.centerRight,
                        child: Icon(
                          Icons.more_vert_rounded,
                          color: sTextColorDes,
                        )))
              ],
            ),
            Container(
                padding:
                    EdgeInsets.symmetric(vertical: sDefaultMarginPadding * 2),
                alignment: Alignment.centerLeft,
                child: Text(
                  widget.ListData[index].toJson()["title"],
                  style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15),
                )),
            Container(
              child: Row(
                children: [
                  GestureDetector(
                    onTap: () {
                      Get.toNamed('/tik_video_screen');
                    },
                    child: Container(
                      height: (MediaQuery.of(context).size.width -
                              sDefaultMarginPadding * 6) *
                          widget.ListData[index].toJson()["cover"]["height"] /
                          widget.ListData[index].toJson()["cover"]["width"],
                      width: MediaQuery.of(context).size.width -
                          sDefaultMarginPadding * 6,
                      decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(sDefaultMarginPadding),
                          image: DecorationImage(
                              image: NetworkImage(widget.ListData[index]
                                  .toJson()["cover"]["url"]),
                              fit: BoxFit.fill)),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: sDefaultMarginPadding * 2),
              padding: EdgeInsets.symmetric(
                  vertical: sDefaultMarginPadding,
                  horizontal: sDefaultMarginPadding + 4),
              decoration: BoxDecoration(
                  color: Color.fromRGBO(241, 242, 246, 1),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SvgPicture.asset(
                    "assets/icons/huatides.svg",
                    width: 20,
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Text(
                    "关于近期旅行的",
                    style: TextStyle(fontWeight: FontWeight.w500, fontSize: 13),
                  )
                ],
              ),
            ),
            Container(
              child: Row(
                children: [
                  ImageStackPage(),
                  Expanded(
                    child: Text(
                      "${widget.ListData[index].toJson()["likes"]}人发表了态度",
                      style: TextStyle(color: sTextColorDes, fontSize: 13),
                    ),
                  ),
                  TextButton.icon(
                      onPressed: () {
                        setState(() {
                          if (_currentIndex == index) {
                            _currentIndex = -1;
                          } else {
                            _currentIndex = index;
                          }
                        });
                      },
                      icon: SvgPicture.asset(
                        "assets/icons/comment.svg",
                        height: 24,
                      ),
                      label: Text(
                        "${widget.ListData[index].toJson()["comments"]}",
                        style: TextStyle(color: sTextColorDes),
                      )),
                  SizedBox(
                    width: 15,
                  ),
                  LikeButton(
                    size: 24,
                    mainAxisAlignment: MainAxisAlignment.center,
                    likeCountPadding: EdgeInsets.only(left: 10),
                    countPostion: CountPostion.right,
                    likeBuilder: (bool isLiked) {
                      if (isLiked) {
                        return SvgPicture.asset(
                          "assets/icons/zan_active.svg",
                          color: Colors.red,
                        );
                      } else {
                        return SvgPicture.asset(
                          "assets/icons/zan.svg",
                        );
                      }
                    },
                    likeCount: widget.ListData[index].toJson()["likes"],
                  ),
                ],
              ),
            ),
            Container(
              padding:
                  EdgeInsets.symmetric(vertical: sDefaultMarginPadding * 2),
              child: AnimatedContainer(
                height: _currentIndex == index ? 50 : 0,
                duration: Duration(milliseconds: 300),
                child: Offstage(
                  offstage: _currentIndex != index,
                  child: CommentCust(),
                ),
              ),
            ),
            SizedBox(
              height: 20,
            )
          ],
        ),
      ),
    );
  }

  Widget CommentCust() {
    return Row(
      children: [
        Expanded(
            child: Container(
          padding: EdgeInsets.symmetric(horizontal: sDefaultMarginPadding * 2),
          decoration: BoxDecoration(
              color: Color.fromRGBO(238, 238, 238, 1),
              borderRadius: BorderRadius.all(Radius.circular(6))),
          child: TextField(
            cursorColor: sTextColorDes,
            style: TextStyle(fontSize: 14),
            decoration: InputDecoration(
              hintText: "请输入",
              border: InputBorder.none,
            ),
          ),
        )),
        TextButton(
            onPressed: () {},
            child: Text(
              "发送",
              style: TextStyle(color: sTextColorDes),
            ))
      ],
    );
  }
}

class ImageStackPage extends StatelessWidget {
  final double sizeW = 50.0;
  final double offsetW = 20.0;

  List<Widget> _getStackItems(int count) {
    List<Widget> _list = [];
    for (var i = 0; i < count; i++) {
      double off = 10.0 * i;
      _list.add(Positioned(
        left: off,
        child: CircleAvatar(
          radius: 10,
          backgroundImage: AssetImage("assets/test/avatar.jpg"),
        ),
      ));
    }
    return _list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
              width: 60,
              height: 20,
              child: Container(
                child: Stack(
                  children: _getStackItems(4),
                ),
              )),
        ],
      ),
    );
  }
}
